<template>
  <div class="app-container">
    <template>
      <el-tabs type="border-card">
        <el-tab-pane label="面试人员名单">
          <div class="filter-container">
            <el-form :inline="true">
              <el-form-item>
                <el-input
                  v-model="pagination.queryParams.stuName"
                  placeholder="学生姓名"
                  clearable>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" icon="el-icon-search" @click="handleCurrentChange(1)">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="table-container">
              <el-table
                ref="multipleTable"
                :data="dataList"
                tooltip-effect="dark"
                style="width: 100%"
                border>
                <el-table-column
                  prop="stuName"
                  label="学生姓名"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="phone"
                  label="联系电话"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="email"
                  label="学生邮箱"
                  width="160">
                </el-table-column>
                <el-table-column
                  prop="description"
                  label="学生性格自述"
                  width="400">
                </el-table-column>
                <el-table-column
                  prop="postName"
                  label="申请职位"
                  width="250">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态">
                  <template slot-scope="scope">
                    <el-tag size="small" v-if="scope.row.status === 1" type="success">已通过公司审核</el-tag>
                    <el-tag size="small" v-else-if="scope.row.status === 2" type="danger">公司已邮件告知面试</el-tag>
                    <el-tag size="small" v-else-if="scope.row.status === 3" type="danger">学生已收到确认</el-tag>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="icon"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="success" size="mini" icon="el-icon-document" @click="handleAddDialog(scope.row)" >学生简历</el-button>
                    <el-button type="success" size="mini" icon="el-icon-view" @click="handleSeeStudentInfo(scope.row)" >查看学生个人信息</el-button>
                    <template v-if="scope.row.status === 1">
                      <el-button type="primary" size="mini" icon="el-icon-message" @click="handleEmailDialog(scope.row)" >发送邮件</el-button>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
           </div>
            <el-tab-pane label="邮件发出记录">
              <template v-if="dataList2 != null">
                <div class="table-container">
                  <el-table
                    ref="multipleTable"
                    :data="dataList2"
                    tooltip-effect="dark"
                    style="width: 100%"
                    border>
                    <el-table-column
                      prop="stuName"
                      label="学生姓名"
                      width="120">
                    </el-table-column>
                    <el-table-column
                      prop="toPeople"
                      label="学生邮箱"
                      width="170">
                    </el-table-column>
                    <el-table-column
                      prop="subject"
                      label="学生标题"
                      width="400">
                    </el-table-column>
                    <el-table-column
                      prop="text"
                      label="邮件内容">
                    </el-table-column>
                    <el-table-column
                      prop="sentDate"
                      label="发送日期"
                      width="250">
                    </el-table-column>
                  </el-table>
                </div>
                <div class="pagination-container">
                  <el-pagination
                    :current-page="pagination2.currentPage"
                    :page-size="pagination2.pageSize"
                    :total="pagination2.total"
                    :page-sizes="[10, 20, 50, 100]"
                    @current-change="handleCurrentChange2"
                    @size-change="handleSizeChange2"
                    layout="total,sizes, prev, pager, next, jumper">
                  </el-pagination>
                </div>
              </template>
            </el-tab-pane>
          <div class="pagination-container">
              <el-pagination
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 50, 100]"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total,sizes, prev, pager, next, jumper">
          </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>
    <!--查看学生简历信息窗口-->
    <el-dialog
      title="查看学生简历信息窗口"
      :visible.sync="dialogFormVisible"
      width="1200px"
      :before-close="handleAddFormClose">
      <el-row :gutter="20">
        <!--求职状态选项卡-->
        <el-col :span="24">
          <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">个人简历</span></el-menu-item>
          </el-menu>
        </el-col>
        <!--求职状态选项卡-->
        <!--简历展示容器-->
        <el-col :span="24">
          <el-card
            style="
            margin-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            border: 3px solid #FFFFFF;
            box-shadow: 1px 2px 5px #999999;"
            shadow="hover">
            <el-col :span="19" style="border: 3px solid #999999;">
              <template v-if="resume">
                <el-collapse  v-model="activeNames">
                  <el-collapse-item name="1" >
                    <template slot="title">
                      <h2 style="color: mediumvioletred">{{resume.studentName}}的个人简历<i class="header-icon el-icon-info"></i></h2>
                    </template>
                    <div>
                      <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">求职状态</span></el-divider>
                      <el-tag size="medium"
                              effect="plain"
                              type="danger">
                        {{resume.jobStatus}}
                      </el-tag>
                    </div>
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">简历描述</span></el-divider>
                    <div>{{resume.remark}}</div>
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">求职意向</span></el-divider>
                    <!--求职意向列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #999999;
                    width: 100%;"
                        shadow="hover">
                        <template v-if="resume.intentionList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.intentionList" :key="item.id"  style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="薪资要求">{{item.salary}}</el-descriptions-item>
                            <el-descriptions-item label="期望城市">{{item.city}}</el-descriptions-item>
                            <el-descriptions-item label="工作性质">{{item.workType}}</el-descriptions-item>
                            <el-descriptions-item label="期望行业">
                              <template v-for="(item,index) in item.industryList" >
                                <span>{{item}}</span>
                                <el-divider direction="vertical"></el-divider>
                              </template>
                            </el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增求职意向吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>

                      </el-card>
                    </div>
                    <!--求职意向列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">项目经历</span></el-divider>
                    <!--项目经历列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                        shadow="hover">
                        <template v-if="resume.projectList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.projectList" :key="item.id"   style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="项目名称">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="开始时间">{{item.beginTime}}</el-descriptions-item>
                            <el-descriptions-item label="结束时间">{{item.endTime}}</el-descriptions-item>
                            <el-descriptions-item label="项目简述">{{item.description}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有求职意向方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增求职意向吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--项目经历列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">培训经历</span></el-divider>
                    <!--培训经历列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                          margin-top: 10px;
                          padding-bottom: 10px;
                          box-shadow: 1px 2px 5px #8c939d;
                          width: 100%;"
                        shadow="hover">
                        <template v-if="resume.trainList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.trainList" :key="item.id"   style="padding: 20px;color: red;"  :title="item.course" :column="2">
                            <el-descriptions-item label="培训机构(公司)">{{item.trainCompany}}</el-descriptions-item>
                            <el-descriptions-item label="培训开始时间">{{item.beginTime}}</el-descriptions-item>
                            <el-descriptions-item label="培训结束时间">{{item.endTime}}</el-descriptions-item>
                            <el-descriptions-item label="培训课程">{{item.course}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有培训经历方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增培训经历吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>

                      </el-card>
                    </div>
                    <!--培训经历列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">荣誉证书</span></el-divider>
                    <!--荣誉证书列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                          margin-top: 10px;
                          padding-bottom: 10px;
                          box-shadow: 1px 2px 5px #8c939d;
                          width: 100%;"
                        shadow="hover">
                        <template v-if="resume.certificateList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.certificateList" :key="item.id"   style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="证书名称">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="获得时间">{{item.createTime}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有荣誉证书方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增荣誉证书吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--荣誉证书列表展示-->
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">学生干部经历</span></el-divider>
                    <!--学生干部列表展示-->
                    <div style="clear: both;">
                      <el-card
                        style="
                    margin-top: 10px;
                    padding-bottom: 10px;
                    box-shadow: 1px 2px 5px #8c939d;
                    width: 100%;"
                        shadow="hover">
                        <template v-if="resume.studentCadreList.length != 0">
                          <el-descriptions v-for="(item,index) in resume.studentCadreList" :key="item.id"   style="padding: 20px;color: red;"  :title="item.name" :column="2">
                            <el-descriptions-item label="干部类型">{{item.type}}</el-descriptions-item>
                            <el-descriptions-item label="干部职务">{{item.name}}</el-descriptions-item>
                            <el-descriptions-item label="任职开始时间">{{item.beginTime}}</el-descriptions-item>
                            <el-descriptions-item label="任职结束时间">{{item.endTime}}</el-descriptions-item>
                          </el-descriptions>
                        </template>
                        <template v-else>
                          <el-result icon="info" title="新增信息提示" subTitle="当前您的简历还没有学生干部方面的说明哦！">
                            <template slot="extra">
                              <el-empty description="快新增增学生干部吧！"></el-empty>
                            </template>
                          </el-result>
                        </template>
                      </el-card>
                    </div>
                    <!--学生干部列表展示-->
                  </el-collapse-item>
                </el-collapse>
              </template>
              <template v-else>
                <div style="float: left">
                  <el-image
                    style="width: 400px; height: 300px;padding: 20px;"
                    fit="fit"
                    src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E6%B1%82%E8%81%8C%E7%AE%80%E5%8E%86%E9%85%8D%E5%9B%BE.jpg">
                  </el-image>
                </div>
                <div style="float: right; width: 600px; margin-right: 30px;">
                  <div style="text-align: center;font-weight: bolder;">
                    <span style="color: indianred">头上一片晴天</span>
                    <el-divider direction="vertical"></el-divider>
                    <span style="color: indianred">心中一个想念</span>
                    <el-divider content-position="right">少年包青天</el-divider>
                  </div>
                  <div>
                    <h3>【成都】 ——赵雷</h3>
                    <p>让我掉下眼泪的 ,不止昨夜的酒</p>
                    <p>让我依依不舍的,不止你的温柔,余路还要走多久,你攥着我的手,让我感到为难的,是挣扎的自由</p>
                    <p>分别总是在九月,回忆是思念的愁</p>
                    <p>深秋嫩绿的垂柳, 亲吻着我额头</p>
                    <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                    <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                  </div>
                  <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                </div>
              </template>
            </el-col>
          </el-card>
        </el-col>
        <!--简历展示容器-->
      </el-row>
    </el-dialog>
    <!--查看学生简历信息窗口-->
    <!--给通过简历筛选的学生发送邮件-->
    <el-dialog
      title="给通过简历筛选的学生发送邮件"
      :visible.sync="dialogEmailFormVisible"
      width="1200px"
      :before-close="handleEmailFormClose">
      <el-form ref="emailForm" :rules="rules" :model="mailData">
        <el-form-item label="面试人邮箱" prop="toPeople" label-width="100px">
          <el-input v-model="mailData.toPeople"></el-input>
        </el-form-item>
        <el-form-item label="邮件内容" prop="text" label-width="100px">
          <el-input type="textarea" v-model="mailData.text" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sendEmail('emailForm')">点击发送</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--给通过简历筛选的学生发送邮件-->

    <!--查看学生信息-->
    <el-dialog
      title="查看学生信息窗口"
      :visible.sync="dialogStudentInfoFormVisible"
      :before-close="handleSeeStudentInfoClose">
      <div>
        <el-card
          style="
            margin-top: 10px;
            padding-bottom: 10px;
            box-shadow: 1px 2px 5px #999999;
            width: 100%;"
          shadow="hover">
          <!--个人信息选项卡-->
          <el-col :span="24">
            <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1"><span style="font-weight: bolder;font-size: 20px; color: #2788f3;">个人信息</span></el-menu-item>
            </el-menu>
          </el-col>
          <!--个人信息选项卡-->
          <!--个人信息选项卡容器-->
          <el-col :span="24">
            <div class="profile-pre-info">
              <div>
                <el-divider><i class="el-icon-mobile-phone"></i>个人信息</el-divider>
                <el-descriptions title="【学生基础信息】" style="color: indianred;" direction="vertical" :column="5" border>
                  <el-descriptions-item label="学生姓名">{{studentInfo.name}}</el-descriptions-item>
                  <el-descriptions-item label="学生学号">{{studentInfo.account}}</el-descriptions-item>
                  <el-descriptions-item label="学生生日">{{studentInfo.birthday}}</el-descriptions-item>
                  <el-descriptions-item label="学生专业">{{studentInfo.profession}}</el-descriptions-item>
                  <el-descriptions-item label="学生院校">{{studentInfo.college}}</el-descriptions-item>
                  <el-descriptions-item label="受教育程度">{{studentInfo.education}}</el-descriptions-item>
                  <el-descriptions-item label="电话">{{studentInfo.phone}}</el-descriptions-item>
                  <el-descriptions-item label="性别">
                    <el-tag size="small" v-if="studentInfo.sex === 1" type="success">男</el-tag>
                    <el-tag size="small" v-else-if="studentInfo.sex === 2" type="success">女</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="毕业时间">{{studentInfo.graduateDate}}</el-descriptions-item>
                </el-descriptions>
                <el-divider></el-divider>
                <el-descriptions title="【学生扩展信息】" style="color:indianred;" direction="vertical" :column="1" border>
                  <el-descriptions-item label="一寸照">
                    <template v-if="studentInfo.photo == null||studentInfo.photo == ''">
                      <el-image
                        style="width: 100px; height: 100px"
                        src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F"
                        fit="fit">
                      </el-image>
                    </template>
                    <template v-else>
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="studentInfo.photo"
                        fit="fit">
                      </el-image>
                    </template>

                  </el-descriptions-item>
                  <el-descriptions-item label="学生性格">{{studentInfo.description}}</el-descriptions-item>
                  <el-descriptions-item label="政治面貌">{{studentInfo.political}}</el-descriptions-item>
                </el-descriptions>
              </div>
              <!--个人信息文本-->
            </div>
          </el-col>
          <!--个人信息选项卡容器-->
        </el-card>
      </div>
    </el-dialog>
    <!--查看学生信息-->

  </div>
</template>
<script>
    import {updateStatus,findPassPeople} from "@/api/pass";
    import {sendEmail,getCompanyEmail} from "@/api/email";
    import {findById} from "@/api/resume";
    import {getStudentInfoById} from "@/api/student";
export default {
  name: "index",
  data() {
    return {
      activeNames:1,//Tab卡默认展示第一个
      pagination: {//分页数据模型数
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryParams: {}//查询条件
      },
      pagination2: {//分页数据模型数
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        queryParams: {}//查询条件
      },
      dataList: [],//当前页要展示的分页列表数据
      dataList2: [],//当前页要展示的分页列表数据
      formData: {},//表单数据
      mailData:{
        passId:"",
        stuName:"",//学生姓名
        postName:"",//职位名称
        companyName:"",//公司名称
        toPeople:"",//邮箱
        studentId:"",//学生ID
        companyId:"",//公司ID
        text:"请务必登录就业信息网查看最新信息，参加下一步面试等事宜,该公司后续安排将继续通过该招聘平台进行公布，请您密切关注网站动态，并保持手机通畅！并初定与2021年12月16日进行面试。",//邮件内容
      },//邮件数据
      delBtnStatus:true,//简历状态
      dialogFormVisible:false,//查看学生简历信息对象框是否可见
      dialogEmailFormVisible:false,//给通过简历筛选的学生发送邮件是否可见
      resume:{
        intentionList:[],
        projectList:[],
        trainList:[],
        certificateList:[],
        studentCadreList:[],
      },//简历对象
      multipleSelection: [], //选中项数据的数组
      rules: {
        toPeople: [{ required: true, message: '请输入面试人邮箱', trigger: 'blur' },],
        subject: [{ required: true, message: '请选择邮件标题', trigger: 'change' }],
        date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
      },//校验规则
      dialogStudentInfoFormVisible:false,//学生信息框是否可见
      studentInfo:{},//学生信息对象
    }
  },
  created() {
    this.findPage()
    this.findPage2()
  },
  methods: {
    //发送邮件
    sendEmail(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateStatus(this.mailData.passId).then(res=>{
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {}
          })
            this.dialogEmailFormVisible = false
            this.handleCurrentChange(1)
            sendEmail(this.mailData).then(res=>{
              this.resetForm()
              this.findPage()
              this.findPage2()
            })
          })
        }
      })
    },
    //处理表格勾选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.delBtnStatus = val.length === 0
    },
    //弹出添加窗口的方法
    handleAddDialog(row) {
      console.info("【======系统正在查看学生简历信息=====】")
      this.resetForm();
      findById(row.resumeId).then(res=>{
        this.resume = res.data;
      })
      //显示新增窗口
      this.dialogFormVisible = true;
      console.info("【系统成功查看学生简历信息！!!!】")
    },
    //弹出发送邮件窗口
    handleEmailDialog(row) {
      console.info("【======系统正在弹出发送邮件窗口窗口=====】")
      //进行数据复制
      let emailTemp =  JSON.parse(JSON.stringify(row))
      this.mailData.stuName = emailTemp.stuName
      this.mailData.postName = emailTemp.postName
      this.mailData.companyName = emailTemp.companyName
      this.mailData.studentId = emailTemp.studentId
      this.mailData.companyId = emailTemp.companyId
      this.mailData.toPeople = emailTemp.email
      this.mailData.passId = emailTemp.id
      this.dialogEmailFormVisible = true
      console.info("【系统成功弹出的弹出发送邮件窗口！!!!】")
    },
    //关闭新增表单窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
      this.resetForm();
    },
    //关闭发送邮件窗口的方法
    handleEmailFormClose() {
      this.dialogEmailFormVisible = false
      this.resetForm();
    },
    //查看学生信息的方法
    handleSeeStudentInfo(row){
      console.info("===系统正在查看学生信息中====");
      getStudentInfoById(row.studentId).then(res=>{
        this.studentInfo = res.data;
      })
      this.dialogStudentInfoFormVisible = true;
      console.info("====系统成功查看学生信息====");
    },
    //关闭学生信息窗口的方法
    handleSeeStudentInfoClose(){
      this.dialogStudentInfoFormVisible =false;
      this.resetForm();
    },
    //重置表单的方法
    resetForm() {
      this.formData = {}
      this.mailData = {}

    },
    //改变每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPage()
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage()
    },
    //处理分页查询的方法
    findPage() {
      console.log("==系统正在查询面试人员名单==")
      findPassPeople(this.pagination).then(res=>{
        this.dataList = res.data.rows;
        this.pagination.total = res.data.total;
      });
      console.log("==系统成功查询面试人员名单!==")
    },
    //改变每页显示的条数
    handleSizeChange2(pageSize) {
      this.pagination.pageSize = pageSize
      this.findPage2()
    },
    //切换页码
    handleCurrentChange2(currentPage) {
      this.pagination.currentPage = currentPage;
      this.findPage2()
    },
    //处理分页查询的方法
    findPage2() {
      getCompanyEmail(this.pagination2).then(res=>{
        this.dataList2 = res.data.rows;
        this.pagination2.total = res.data.total;
      })
    },
  }
}
</script>

<style scoped>

</style>
